import React, { Component } from 'react'
import { Form, Icon, Input, Button, Checkbox, Card} from "antd";
//引入登录页的样式文件
import "./login.css"
class Login extends Component{
	//点击登录的事件
	handleSubmit = e => {
	  e.preventDefault();
	  this.props.form.validateFields((err, values) => {
	    if (!err) {
	      console.log("验证成功，获取用户名和密码", values);
		  if(values.username==='admin' && values.password==="123456"){
			this.props.history.push("/admin")
			//登录成功后设置一个token
			localStorage.setItem("token","000000")
		  }
	    }
	  });
	};
	render(){
	const { getFieldDecorator } = this.props.form;
		return(
			<Card title="管理员登录" className="login-form">
			  <Form onSubmit={e => this.handleSubmit(e)}>
			    <Form.Item>
			      {getFieldDecorator("username", {
			        rules: [{ required: true, message: "请输入用户名!" }]
			      })(
			        <Input
			          prefix={<Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />}
			          placeholder="用户名admin"
			        />
			      )}
			    </Form.Item>
			    <Form.Item>
			      {getFieldDecorator("password", {
			        rules: [{ required: true, message: "请输入密码!" }]
			      })(
			        <Input
			          prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
			          type="password"
			          placeholder="密码123456"
			        />
			      )}
			    </Form.Item>
			    <Form.Item>
			      {getFieldDecorator("remember", {
			        valuePropName: "checked",
			        initialValue: true
			      })(<Checkbox>记住我</Checkbox>)}
			      <Button
			        type="primary"
			        htmlType="submit"
			        className="login-form-button"
			      >
			        登录
			      </Button>
			    </Form.Item>
			  </Form>
			</Card>
		)
	}
}
export default Form.create({ name: "loginForm" })(Login);
